<template>
  <div class="order">
    <div class="header">
      <van-sticky>
        <van-nav-bar title="订单" />
      </van-sticky>
      <van-tabs @click="onClick">
        <van-tab title="全部">
          <van-card
            v-for="order in OrderData"
            :key="order.id"
            :desc="
              order.address.province +
              order.address.city +
              order.address.area +
              order.address.address
            "
            :price="order.total"
            :title="order.customer.username"
            :thumb="order.customer.userFace"
            @click="goDetails(order.id)"
          >
            <template #tags>
              <van-tag plain type="success" v-if="order.status == '已完成'">{{
                order.status
              }}</van-tag>
              <van-tag
                plain
                type="warning"
                v-else-if="order.status == '待接单'"
                >{{ order.status }}</van-tag
              >
              <van-tag plain type="primary" v-else>{{ order.status }}</van-tag>
            </template>
            <template #footer>
              <span>{{
                moment(order.orderTime).format("YYYY-MM-DD hh:mm:ss")
              }}</span>
            </template>
          </van-card>
          <div class="bottom"></div>
          <van-empty v-show="OrderData.length == 0" description="您暂无订单" />
        </van-tab>
        <van-tab title="待接单">
          <van-card
            v-for="order in secArr"
            :key="order.id"
            :desc="
              order.address.province +
              order.address.city +
              order.address.area +
              order.address.address
            "
            :price="order.total"
            :title="order.customer.username"
            :thumb="order.customer.userFace"
            @click="goDetails(order.id)"
          >
            <template #tags>
              <van-tag plain type="success" v-if="order.status == '已完成'">{{
                order.status
              }}</van-tag>
              <van-tag
                plain
                type="warning"
                v-else-if="order.status == '待接单'"
                >{{ order.status }}</van-tag
              >
              <van-tag plain type="primary" v-else>{{ order.status }}</van-tag>
            </template>
            <template #footer>
              <span>{{
                moment(order.orderTime).format("YYYY-MM-DD hh:mm:ss")
              }}</span>
            </template>
          </van-card>
          <div class="bottom"></div>
          <van-empty
            v-show="secArr.length == 0"
            description="您暂无待接单的订单"
          />
        </van-tab>
        <van-tab title="待服务">
          <van-card
            v-for="order in thirdArr"
            :key="order.id"
            :desc="
              order.address.province +
              order.address.city +
              order.address.area +
              order.address.address
            "
            :price="order.total"
            :title="order.customer.username"
            :thumb="order.customer.userFace"
            @click="goDetails(order.id)"
          >
            <template #tags>
              <van-tag plain type="success" v-if="order.status == '已完成'">{{
                order.status
              }}</van-tag>
              <van-tag
                plain
                type="warning"
                v-else-if="order.status == '待接单'"
                >{{ order.status }}</van-tag
              >
              <van-tag plain type="primary" v-else>{{ order.status }}</van-tag>
            </template>
            <template #footer>
              <span>{{
                moment(order.orderTime).format("YYYY-MM-DD hh:mm:ss")
              }}</span>
            </template>
          </van-card>
          <div class="bottom"></div>
          <van-empty
            v-show="thirdArr.length == 0"
            description="您暂无待接单的订单"
          />
        </van-tab>
        <van-tab title="已完成">
          <van-card
            v-for="order in fifArr"
            :key="order.id"
            :desc="
              order.address.province +
              order.address.city +
              order.address.area +
              order.address.address
            "
            :price="order.total"
            :title="order.customer.username"
            :thumb="order.customer.userFace"
            @click="goDetails(order.id)"
          >
            <template #tags>
              <van-tag plain type="success" v-if="order.status == '已完成'">{{
                order.status
              }}</van-tag>
              <van-tag
                plain
                type="warning"
                v-else-if="order.status == '待接单'"
                >{{ order.status }}</van-tag
              >
              <van-tag plain type="primary" v-else>{{ order.status }}</van-tag>
            </template>
            <template #footer>
              <span>{{
                moment(order.orderTime).format("YYYY-MM-DD hh:mm:ss")
              }}</span>
            </template>
          </van-card>
          <div class="bottom"></div>
          <van-empty
            v-show="fifArr.length == 0"
            description="您暂无已完成的订单"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
let moment = require("moment");
export default {
  data() {
    return {
      active: 0,
      secArr: [],
      thirdArr: [],
      fifArr: [],
      list: {
        page: 1,
        pageSize: 99,
      },
    };
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    ...mapActions("order", ["getAllOrderData"]),
    moment,
    onClick(name, title) {
      if (title == "待接单") {
        this.secArr = this.OrderData.filter((item) => {
          return item.status == "待接单";
        });
      } else if (title == "待服务") {
        this.thirdArr = this.OrderData.filter((item) => {
          return item.status == "待服务";
        });
      } else {
        this.fifArr = this.OrderData.filter((item) => {
          return item.status == "已完成";
        });
      }
    },
    goDetails(id) {
      this.$router.push({
        path: "/manager/orderdetails",
        query: { id },
      });
    },
  },
  computed: {
    ...mapState("order", ["OrderData"]),
    ...mapState("user", ["userInfo"]),
  },
  created() {
    this.getUserInfo().then((r) => {
      this.list.employeeId = this.userInfo.id;
      this.getAllOrderData(this.list);
    });
  },
};
</script>

<style scoped>
.bottom {
  height: 60px;
}
.van-card {
  box-shadow: 2px 1px 3px 2px #77c4e2;
  line-height: 10px;
  font-size: 15px;
  margin: 13px;
  border-radius: 10px;
}
.van-card__title {
  margin-bottom: 10px;
  font-size: 18px !important;
  font-weight: bolder;
}
.van-card__price-integer {
  margin-top: 10px !important;
  font-weight: bolder;
  font-size: 18px !important;
  color: crimson;
}
.van-nav-bar {
  background-image: linear-gradient(
    90deg,
    rgb(191, 115, 255),
    rgb(117, 121, 255)
  );
}
::v-deep .van-nav-bar__title {
  color: white !important;
  font-weight: bolder;
}
</style>